<template>
  <div>
    <h3>NEWS</h3>
    <div class="left-box">
      <div class="left">
        <ul>
          <li v-for="item of list" :key=item.id>
            <router-link replace :to="{
              name:'xd',
              params:{
                id: item.id,
                name:item.name,
                content:item.content
              }
            }">
              {{item.name}}
            </router-link>
          </li>
        </ul>
      </div>
      <div class="right">
        <RouterView></RouterView>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { reactive } from 'vue'
  import { RouterView, RouterLink } from 'vue-router'
  let list = reactive([
    { 'id': 'xx01', name: '蝉思管理', content: "初创公司" },
    { 'id': 'xx02', name: '北京朝阳区', content: "北京的其中一个区" },
    { 'id': 'xx03', name: '酒仙桥', content: "一个历史悠久的城市" },
    { 'id': 'xx04', name: '宏源大厦', content: "初创企业的聚集地" }
  ])
</script>
<style scoped>
  .left {
    width: 300px;
    float: left;
  }

  .right {
    width: 1800px;
  }

  ul {
    width: 200px;
  }

  li {
    /* list-style: none; */
    color: blue;
  }

  li::marker {
    color: #64967e;
  }
</style>